<template>
  <view>
    <block v-for="(columnItems, index) in list" :key="index">
      <view class="cu-bar bg-white" v-if="options.showTitle">
        <view class="action">
          <text class="cuIcon-titles text-blue"></text>
          <slot name="header" v-bind:row="columnItems" ><text class="pf-bold">{{ options.title }}</text></slot>
        </view>
        <view @click="onRight">
          <slot name="right"></slot>
        </view>
      </view>
      <scroll-view scroll-y="true" class="scroll-Y">
        <view class="solid-bottom bg-white padding-lr">
          <view
            v-for="item in columnItems"
            :key="item.key"
            class="margin-bottom-xs l-row"
          >
            <text class="flex-sub">{{ item.label }}</text>
            <text class="flex-twice text-right">{{ item.value }}</text>
          </view>
          <view class="padding-bottom"></view>
        </view>
      </scroll-view>
    </block>
  </view>
</template>
<script>
import { deepClone } from "@/utils/util";
export default {
  data() {
    return {
      list: [],
    };
  },
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    tableData: {
      handler: function (newVal, oldVal) {
        if (newVal.length) {
          this.formatData();
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    formatData() {
      let options = this.options.column;
      let tableData = this.tableData;
      let list = [];
      tableData.forEach((columnItems) => {
        let arr = deepClone(options);
        arr.forEach((optionsItem) => {
          if (columnItems.hasOwnProperty(optionsItem.key)) {
            if (optionsItem.type === "select") {
              let value = columnItems[optionsItem.key];
              optionsItem.value = optionsItem.dicData.find(
                (optionsItem) => optionsItem.value === value
              ).label;
            } else {
              optionsItem.value = columnItems[optionsItem.key] || "/";
            }
          } else {
            optionsItem.hide = true;
          }
        });
        list.push(arr.filter((item) => !item.hide));
      });
      this.list = list;
    },
  },
};
</script>

<style>
.l-row {
  display: flex;
  justify-content: space-between;
  padding-top: 10upx;
  padding-bottom: 10upx;
}
.scroll-Y {
  max-height: 600rpx;
}
</style>
